<html>
<head>
<script src="../../main/resources/net/pimpas/web/jsf/components/js/pimpas/pimpas.js"></script>
<script>
// detect
pimpas.RequireJS( 'detect.js' );
// listener
pimpas.RequireJS( 'listener.js' );
// log
pimpas.RequireJS( 'log.js' );
// timer
pimpas.RequireJS( 'timer.js' );
// interval
pimpas.RequireJS( 'interval.js' );
// dom
pimpas.RequireJS( 'dom.js' );
// dom event
pimpas.RequireJS( 'event.js' );
// httprequest
pimpas.RequireJS( 'httpRequest.js' );
// ajax
pimpas.RequireJS( 'ajax.js' );
// ajaxpopulate
pimpas.RequireJS( 'ajaxPopulate.js' );
// input
pimpas.RequireJS( 'populate/input.js' );
// select
pimpas.RequireJS( 'populate/select.js' );
// select
pimpas.RequireJS( 'populate/radio.js' );
// checkbox
pimpas.RequireJS( 'populate/checkbox.js' );
// html
pimpas.RequireJS( 'populate/html.js' );
// xml
pimpas.RequireJS( 'xml.js' );
// xpath
pimpas.RequireJS( 'xpath.js' );
// json
pimpas.RequireJS( 'json.js' );
// control
pimpas.RequireJS( 'control/ajaxControl.js');
// firebug
pimpas.RequireJS( 'firebug.js');
</script>
<style>
.classLoading {
	position: absolute;
	width: 100px;
	height: 20px;
	display: block;
	background-color: pink;
	left: 1180px;
	font-style:oblique;
}

#updateMe {
	background-color: pink;
	border: 1px solid black;
	width: 300px;
	height: 200px;
	display: block;
	overflow: auto;
}
</style>
</head>
<body>
<script>
pimpas.FireBug.installLogInConsole( );
// init pool
HTTPRequestPool.init( );
function doAjax( url ) {
	// create input populate
	var ajaxPopulate = new pimpas.AJAX.Populate( );
	ajaxPopulate.addListener( new pimpas.AJAX.Control( 'loading' ));
	// create request
	var inputRequest = pimpas.HTTPRequest.getInstance( );
	
	inputRequest.setUrl( url );
	inputRequest.addParameter('anyParameter', 'anyValue');
	inputRequest.setRequestMethod( pimpas.HTTPRequest.methods.GET );
	// put the request
	ajaxPopulate.setRequest( inputRequest );
	// timer
	ajaxPopulate.execute( );
}
</script>
<div id="loading" class="classLoading" style="visibility: hidden;">
	Loading ...
</div>
<form>
<input type="button" name="makeRequest" value="doAjax" onClick="doAjax('populate.xml')">
<hr>
Some Text: <input type="text" id="ajaxResponse01" name="ajaxResponse01">
<hr>
Fruit: <select id="ajaxResponseSelect" name="ajaxResponseSelect" onChange="(this.selectedIndex>0) ? doAjax('info.xml') : pimpas.DOM.clearAllOptions('personCombo');">
</select>
<hr>
People Names: <select id="personCombo" name="personCombo">
</select>
<hr>
Male: <input type="radio" id="radioResponse" name="radioResponse" value="0">Female: <input type="radio" name="radioResponse" value="1" checked="true">
<hr>
Tenis: <input type="checkbox" id="sports" name="sports" value="0">Ping-Pong: <input type="checkbox" name="sports" value="1">
Swming: <input type="checkbox" name="sports" value="2">
<hr>
<div id="updateME"></div>
</form>
<script>
pimpas.DOM.toReadOnly( 'ajaxResponse01');
</script>
</body>
</html>